<html>
    <head>
        <meta name="layout" content="main-layout"></meta>
        <title>Distribution</title>
        <link rel="stylesheet" href="${resource(dir:'css',file:'distribution.css')}"></link>
        <g:javascript src="distribution.js"/>
    </head>

    <body>
        <g:if test="${flash.message}">
            <div class='message'>${flash.message}</div>
        </g:if>

        <div>
            <p class="short-description">Choose agents, select task and click 'Submit Task'</p>
        </div>

        <form action="submitTask" method="post">
            <fieldset>
                <legend>
                    <img src="${resource(dir:'images',file:'agent_big.png')}" />
                    <span class="section-legend">Agents: </span>
                </legend>

                <table class="composition-table" cellspacing="1" cellpadding="0">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Agent ID</th>
                            <th>Agent Status</th>
                            <th>Agent Status Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <g:each in="${pings}" var="ping">
                            <tr>
                                <td><input class="padded-checkbox" type="checkbox" name="agentId" value="${ping.sourceId}" /></td>
                                <td class="bolded-cell">${ping.sourceId}</td>
                                <td>
                                    <div class="agent-status status-${ping.agentStatus.name}">
                                        <div class="icon"></div>
                                        <span>${ping.agentStatus.name}</span>
                                    </div>
                                </td>
                                <td>${ping.agentStatus.description}</td>
                            </tr>
                        </g:each>
                   </tbody>
                </table>
            </fieldset>

            <fieldset>
                <legend>
                    <img src="${resource(dir:'images',file:'task_big.png')}" />
                    <span class="section-legend">Tasks: </span>
                </legend>
                <select name="taskName" id="select-task" class="cool-select">
                    <g:each in="${tasks}" var="task">
                        <option value="${task.name}">
                            ${task.name}<g:if test="${task.description}"> -- ${task.description}</g:if>
                        </option>
                    </g:each>
                </select>
            </fieldset>
            <button id="submit-task-button" class="new-button" onclick="submitTask();">Submit Task</button>
        </form>
    </body>
</html>
